<template>
  <div id="app">
    <transition name="rotate-fall">
      <van-pull-refresh
        v-model="isLoading"
        :head-height="80"
        @refresh="onRefresh"
      >
        <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
        <template #pulling="props">
          <img
            class="doge"
            src="http://img.mp.itc.cn/upload/20160708/9eaf812b547e4a2a8f103086d4662837.jpg"
            :style="{ transform: `scale(${props.distance / 80})` }"
          />
        </template>

        <!-- 释放提示 -->
        <template #loosing>
          <img
            class="doge"
            src="http://www.qqtn.com/up/2015-5/14304407224967817.jpg"
          />
        </template>

        <!-- 加载提示 -->
        <template #loading>
          <img
            class="doge"
            src="http://5b0988e595225.cdn.sohucs.com/images/20170903/4608c81fa6d745968bcb6f266eb0a71a.gif"
          />
        </template>

        <router-view />
      </van-pull-refresh>
    </transition>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
  },
  created() {
    //加载完成，动画关闭
    // let loading=document.getElementById('loader-wrapper')
    // if(loading != null){
    //     document.body.removeChild(loading);
    // }
    this.$store.dispatch("getLogin");

    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },
};
</script>
<style lang="less" scoped>
.doge {
  width: 180px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
.app .app-router-view {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  visibility: visible;
}
</style>

